<script lang="ts" setup>
  import { deletePatientApi, getPatientListApi } from '@/apis/patient'
  import { useConsultStore } from '@/sotre/consult'
  import type { PatientItem } from '@/types/patient'
  import { onShow } from '@dcloudio/uni-app'
  import { ref } from 'vue'

  // 右侧滑动数据
  const swipeOptions = ref([
    {
      text: '删除',
      style: {
        backgroundColor: '#dd524d',
        color: '',
        fontSize: '',
      },
    },
  ])

  // 定义变量存储用户列表
  const patientList = ref([] as PatientItem[])

  // 调接口获取用户列表
  const getPatientList = async () => {
    const res = await getPatientListApi()
    patientList.value = res
  }

  // 删除患者
  const removePatient = async (id: string, index: number) => {
    // 1. 弹窗确认 - 获取用户确认结果
    const res = await uni.showModal({
      title: '提示',
      content: '确定要删除该患者吗？',
    })

    // 2. 调取接口删除患者
    if (res.confirm) {
      // console.log('删除患者', id, index)
      await deletePatientApi(id)
      // 3. 删除成功，更新数据
      patientList.value.splice(index, 1)
      store.patientId = ''

      uni.showToast({
        title: '删除成功',
        icon: 'success',
      })
    }
  }

  // 生命周期 组件式函数 `onShow` 由 `@dcloudio/uni-app` 提供
  onShow(() => {
    getPatientList()
  })

  // 获取路由参数 - 修改标题
  const props = defineProps<{ type: string }>()
  // console.log('props', props)
  if (props.type === 'consult') {
    // 咨询
    uni.setNavigationBarTitle({
      title: '选择患者',
    })
  }

  // 获取仓库中的患者id
  const store = useConsultStore()
  const selectPatien = (id: string) => {
    if (props.type === 'consult') {
      // 咨询
      store.patientId = id
    }
  }

  // 跳转支付页面
  const toPayment = () => {
    uni.navigateTo({
      url: '/subpkg_consult/payment/index',
    })
  }
</script>

<template>
  <scroll-page>
    <view class="archive-page">
      <view class="archive-tips">最多可添加6人</view>

      <uni-swipe-action>
        <uni-swipe-action-item
          :right-options="swipeOptions"
          v-for="(item, index) in patientList"
          :key="item.id"
          @click="removePatient(item.id, index)"
        >
          <view
            class="archive-card"
            :class="{ active: store.patientId === item.id }"
            @click="selectPatien(item.id)"
          >
            <view class="archive-info">
              <text class="name">{{ item.name }}</text>
              <text class="id-card">{{
                item.idCard.replace(/^(.{6}).+(.{4})$/, '$1********$2')
              }}</text>
              <text class="default" v-if="item.defaultFlag == 1">默认</text>
            </view>
            <view class="archive-info">
              <text class="gender">{{ item.genderValue }}</text>
              <text class="age">{{ item.age }}岁</text>
            </view>
            <navigator
              hover-class="none"
              class="edit-link"
              :url="`/subpkg_archive/form/index?id=${item.id}`"
            >
              <uni-icons type="icon-edit" size="20" color="#16C2A3" custom-prefix="iconfont" />
            </navigator>
          </view>
        </uni-swipe-action-item>
      </uni-swipe-action>

      <!-- 添加按钮 -->
      <view v-if="patientList.length < 6" class="archive-card">
        <navigator class="add-link" hover-class="none" url="/subpkg_archive/form/index">
          <uni-icons color="#16C2A3" size="24" type="plusempty" />
          <text class="label">添加患者</text>
        </navigator>
      </view>
    </view>
    <view class="box" v-if="props.type == 'consult'">
      <button class="uni-button" @click="toPayment">下一步</button>
    </view>
  </scroll-page>
</template>

<style lang="scss">
  @import './index.scss';
  .box {
    padding: 30rpx;
  }
</style>
